<template>
    <div>
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">项目管理</span>
          </template> 
          <el-menu-item-group> 
            <el-menu-item index="1-1">新建项目</el-menu-item> 
          </el-menu-item-group>   
          <el-submenu index="1-2">
               <span slot="title">demo</span> 
               <el-menu-item index="1-2-1">规则变量</el-menu-item>
               <el-menu-item index="1-2-2">规则常量</el-menu-item>      
               <el-submenu index="1-2-3">
                    <span slot="title">规则管理</span> 
                    <el-menu-item index="1-2-3-1">新建规则</el-menu-item>
                    <el-menu-item index="1-2-3-2">规则列表</el-menu-item>    
               </el-submenu>
          </el-submenu> 
        </el-submenu> 
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">数据源管理</span>
        </el-menu-item> 
      </el-menu> 
    </div> 
</template>
<script>
  export default {
    data() {
      return {
        isCollapse: false
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 100%; 
  }
</style>
